<template>
  <div class="app-container editcss">
    <el-row :gutter="0" class="el-card is-always-shadow el-card__body card_contents" style="padding: 0px;">
      <el-col class="title_tops">
        <div class="title_tops_t">
          <div class="title_top_E">New Hospital</div>
          <div class="title_top_C">{{ id == 0 ? '新建' : '编辑' }}机构</div>
        </div>
        <div class="title_tops_b" @click="tabGo">
          <img src="../../assets/iconfont/arrow-left-circle.png" alt="" srcset="">
          <span>返回机构管理</span>
        </div>
      </el-col>
      <el-col class="dialog_title_ch_conter_operate card_contents_tex">
        <div class="editHeld_conter_left">
          <el-upload class="avatar-uploader" :class="untenFun(addFrom.hospitalAvatarUrl)?'border':''" :show-file-list="false" action="/app/img/up" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <div v-if="addFrom.hospitalAvatarUrl" class="avatar">
              <img :src="addFrom.hospitalAvatarUrl">
              <div>点击更换</div>
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon" :style="untenFun(addFrom.hospitalAvatarUrl)?'color: #FE294D;':''"></i>
            <div slot="tip" class="el-upload__tip">建议尺寸：800*800px</div>
          </el-upload>
          <div class="unten" v-if="untenFun(addFrom.hospitalAvatarUrl)">请上传图片</div>
        </div>
        <div class="editHeld_conter_right">
          <div class="xiugai">
            <div>
              <screenSelect title="机构名称：" type='input' v-model="addFrom.hospitalName" :isValue='addFrom.hospitalName'
                placeholder="请输入" @transfer="valueHeld($event, 'hospitalName')" :isBorder="untenFun(addFrom.hospitalName)"
                width='286px' position="top" />
              <div class="unten" v-if="untenFun(addFrom.hospitalName)">请输入机构名称</div>
            </div>
            <div>
              <screenSelect title="机构等级：" type='select' v-model="addFrom.grade" :isValue='addFrom.grade' placeholder="请选择"
                @transfer="valueHeld($event, 'grade')" :isBorder="untenFun(addFrom.grade)" :options="gradeoptions"
                position="top" width='180px' />
              <div class="unten" v-if="untenFun(addFrom.grade)">请选择机构等级</div>
            </div>
            <div>
              <screenSelect title="机构简称：" type='input' v-model="addFrom.hospitalAbbreviation"
                :isValue='addFrom.hospitalAbbreviation' placeholder="请输入"
                @transfer="valueHeld($event, 'hospitalAbbreviation')" :isBorder="untenFun(addFrom.hospitalAbbreviation)"
                width='286px' position="top" />
              <div class="unten" v-if="untenFun(addFrom.hospitalAbbreviation)">请输入机构简称</div>
            </div>
          </div>
          <div class="xiugai">
            <div>
              <screenSelect title="联系人：" type='input' v-model="addFrom.contacts" :isValue='addFrom.contacts'
                placeholder="请输入" @transfer="valueHeld($event, 'contacts')" :isBorder="untenFun(addFrom.contacts)"
                width='199px' position="top" />
              <div class="unten" v-if="untenFun(addFrom.contacts)">请输入联系人</div>
            </div>
            <div>
              <screenSelect title="联系电话：" type='input' v-model="addFrom.contactsPhone" :isValue='addFrom.contactsPhone'
                placeholder="请输入" @transfer="valueHeld($event, 'contactsPhone')"
                :isBorder="untenFun(addFrom.contactsPhone)" width='199px' position="top" />
              <div class="unten" v-if="untenFun(addFrom.contactsPhone)">请输入联系电话</div>
            </div>
            <div>
              <screenSelect title="机构类型：" type='select' v-model="addFrom.type" :isValue='addFrom.type' placeholder="请选择"
                @transfer="valueHeld($event, 'type')" :isBorder="untenFun(addFrom.type)" :options="typeoptions"
                position="top" width='180px' />
              <div class="unten" v-if="untenFun(addFrom.type)">请选择机构类型</div>
            </div>
            <div>
              <screenSelect title="合作类型：" type='select' v-model="addFrom.cooperationType" :isValue='addFrom.cooperationType' placeholder="请选择"
                @transfer="valueHeld($event, 'cooperationType')" :isBorder="untenFun(addFrom.cooperationType)" :options="cooperationoptions"
                position="top" width='180px' />
              <div class="unten" v-if="untenFun(addFrom.cooperationType)">请选择合作类型</div>
            </div>
            <div>
              <screenSelect title="负责人业务员：" type='input' v-model="addFrom.salesPerson" :isValue='addFrom.salesPerson'
                placeholder="请输入" @transfer="valueHeld($event, 'salesPerson')"
                :isBorder="untenFun(addFrom.salesPerson)" width='199px' position="top" />
              <div class="unten" v-if="untenFun(addFrom.salesPerson)">请输入业务员</div>
            </div>
          </div>
          <div class="xiugai">
            <div>
              <screenSelect title="机构运营项目：(不建议切换)" type='select' v-model="addFrom.operationProject"
                :isValue='addFrom.operationProject' placeholder="请选择" @transfer="valueHeld($event, 'operationProject')"
                :isBorder="untenFun(addFrom.operationProject)" :options="operationProjectoptions" position="top"
                width='223px' />
              <div class="unten" v-if="untenFun(addFrom.operationProject)">请选择机构运营项目</div>
            </div>
            <div v-if="iSoperationType">
              <screenSelect title="设备运营类型：" type='select' v-model="addFrom.operationType" :isValue='addFrom.operationType'
                placeholder="请选择" @transfer="valueHeld($event, 'operationType')"
                :isBorder="untenFun(addFrom.operationType)" :options="operationTypeoptions" position="top"
                width='223px' />
              <div class="unten" v-if="untenFun(addFrom.operationType)">请选择设备运营类型</div>
            </div>
            <div >
              <screenSelect title="结算单位：(不建议切换)" type='select' v-model="addFrom.settlementUnit" :isValue='addFrom.settlementUnit'
                placeholder="请选择" @transfer="valueHeld($event, 'settlementUnit')"
                :isBorder="untenFun(addFrom.settlementUnit)" :options="settlementUnitoptions" position="top"
                width='225px' />
              <div class="unten" v-if="untenFun(addFrom.settlementUnit)">请选择结算单位</div>
            </div>
            <div >
              <screenSelect title="充值时长(分钟)：" type='select' v-model="addFrom.rechargeTime" :isValue='addFrom.rechargeTime'
                placeholder="请选择" @transfer="valueHeld($event, 'rechargeTime')"
                :isBorder="untenFun(addFrom.rechargeTime)" :options="timeoptions" position="top"
                width='225px' />
              <div class="unten" v-if="untenFun(addFrom.rechargeTime)">请选择充值时长</div>
            </div>
            
            <div>
              <screenSelect title="机构控制方式：" type='select' v-model="addFrom.controlType" :isValue='addFrom.controlType'
                placeholder="请选择" @transfer="valueHeld($event, 'controlType')" :isBorder="untenFun(addFrom.controlType)"
                :options="controlTypeoptions" position="top" width='225px' />
              <div class="unten" v-if="untenFun(addFrom.controlType)">请选择机构控制方式</div>
            </div>
          </div>
          <div class="xiugai">
            <div>
              <screenSelect title="科室上限：" type='input' v-model="addFrom.departmentUpperLimit"
                :isValue='addFrom.departmentUpperLimit' placeholder="请输入"
                @transfer="valueHeld($event, 'departmentUpperLimit')" :isBorder="untenFun(addFrom.departmentUpperLimit)"
                width='223px' position="top" />
              <div class="unten" v-if="untenFun(addFrom.departmentUpperLimit)">请输入科室上限</div>
            </div>
           <div>
             <screenSelect title="科室人员上限：" type='input' v-model="addFrom.departmentPersonUpperLimit"
               :isValue='addFrom.departmentPersonUpperLimit' placeholder="请输入"
               @transfer="valueHeld($event, 'departmentPersonUpperLimit')"
               :isBorder="untenFun(addFrom.departmentPersonUpperLimit)" position="top" width='225px' />
             <div class="unten" v-if="untenFun(addFrom.departmentPersonUpperLimit)">请输入科室人员上限</div>
           </div>
           <div>
            <screenSelect title="治疗头寿命期限：" type='input' v-model="addFrom.thLifeSpan"
               :isValue='addFrom.thLifeSpan' placeholder="请输入"
               @transfer="valueHeld($event, 'thLifeSpan')"
               :isBorder="untenFun(addFrom.thLifeSpan)" position="top" width='225px' />
             <div class="unten" v-if="untenFun(addFrom.thLifeSpan)">请输入治疗头寿命期限</div>
           </div>
          </div>
          <div class="xiugai">
            <div>
              <screenSelect title="所在地区：" type='select' v-model="addFrom.province" :isValue='addFrom.province'
                placeholder="请选择省" @transfer="valueHeld($event, 'province')" :isBorder="untenFun(addFrom.province)"
                :options="ProvinceList" position="top" width='127px' />
              <div class="unten" v-if="untenFun(addFrom.province)">请选择省</div>
            </div>
            <div style="display: flex;flex-direction: column;justify-content: flex-end;">
              <screenSelect title=" " type='select' v-model="addFrom.city" :isValue='addFrom.city' placeholder="请选择市"
                @transfer="valueHeld($event, 'city')" :isBorder="untenFun(addFrom.city)" :options="CityList"
                position="top" width='127px' />
              <div class="unten" v-if="untenFun(addFrom.city)">请选择市</div>
            </div>
            <div style="display: flex;flex-direction: column;justify-content: flex-end;">
              <screenSelect title=" " type='select' v-model="addFrom.areas" :isValue='addFrom.areas' placeholder="请选择区"
                @transfer="valueHeld($event, 'areas')" :isBorder="untenFun(addFrom.areas)" :options="AreaList"
                position="top" width='127px' />
              <div class="unten" v-if="untenFun(addFrom.areas)">请选择区</div>
            </div>
            <div>
              <screenSelect title="详细地址：" type='input' v-model="addFrom.address" :isValue='addFrom.address'
                placeholder="请输入" @transfer="valueHeld($event, 'address')" :isBorder="untenFun(addFrom.address)"
                width='580px' position="top" />
              <div class="unten" v-if="untenFun(addFrom.address)">请输入详细地址</div>
            </div>
          </div>
          <div class="xiugai">
            <div>
              <screenSelect title="机构服务商：" type='input' v-model="addFrom.serviceProviders"
                :isValue='addFrom.serviceProviders' placeholder="请输入" @transfer="valueHeld($event, 'serviceProviders')"
                :isBorder="untenFun(addFrom.serviceProviders)" width='382px' position="top" />
              <div class="unten" v-if="untenFun(addFrom.serviceProviders)">请输入机构服务商</div>
            </div>
            <div>
              <screenSelect title="机构状态：" type='select' v-model="addFrom.status" :isValue='addFrom.status'
                placeholder="请选择" @transfer="valueHeld($event, 'status')" :isBorder="untenFun(addFrom.status)"
                :options="statusoptions" position="top" width='225px' />
              <div class="unten" v-if="untenFun(addFrom.status)">请输入机构服务商</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="card_contents_footer">
        <el-button type="primary" class="ch_button_seav" @click="submitd">
          <img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
          <div>提交</div>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import smallCard from '@/components/smallCard/index.vue'
import { getHospitalAdd, getHospitalUpdate, getHospitalDetail, getHospitalDelete } from '@/api/organizational'
import { getProvince, getCity, getArea } from '@/api/common'
import {upImg} from '@/api/user'
import {
  mapGetters
} from 'vuex'
export default {
  name: "Field",
  components: {
    construction,
    screenSelect,
    smallCard
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ]),
  },
  watch: {
    'addFrom.province': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getCity()
        }
      }
    },
    'addFrom.city': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getArea()
        }
      }
    },
    'addFrom.operationProject': {
      handler(newVal, oldVal) {
        if (newVal == 1) {
          this.iSoperationType = true
        } else {
          this.addFrom.operationType = ''
          this.iSoperationType = false
        }
      }
    }
  },
  data() {
    return {
      iSoperationType: false,
      city: '',
      areas: '',
      gradeoptions: [{
        value: 0,
        label: '一甲'
      }, {
        value: 1,
        label: '二甲'
      }, {
        value: 2,
        label: '三甲'
      }, {
        value: 3,
        label: '二已'
      }],
      typeoptions: [
        {
          value: 0,
          label: '公立医院'
        }, {
          value: 1,
          label: '私立医院'
        },
        {
          value: 2,
          label: '合作租赁'
        }
      ],
      operationProjectoptions: [
        // {
        //   value: 0,
        //   label: '自购服务'
        // },
         {
          value: 1,
          label: '设备服务'
        }
      ],
      operationTypeoptions: [
        // {
        //   value: 0,
        //   label: '平台收款'
        // }, 
        {
          value: 1,
          label: '医院收款'
        }
      ],
      settlementUnitoptions: [
        // {
        //   value: 0,
        //   label: '天数-订单扣除'
        // }, {
        //   value: 1,
        //   label: '天数-实际天数扣除'
        // }, {
        //   value: 2,
        //   label: '小时'
        // },
        {
          value: 3,
          label: '次数'
        }
      ],
      statusoptions: [
        {
          value: 0,
          label: '运营中'
        }, {
          value: 1,
          label: '停运'
        }
      ],
      cooperationoptions: [
        {
          value: 0,
          label: '销售试用中'
        }, {
          value: 1,
          label: '销售试用结束'
        }, {
          value: 2,
          label: '销售运行'
        }, {
          value: 3,
          label: '合作试用中'
        }, {
          value: 4,
          label: '合作试用结束'
        }, {
          value: 5,
          label: '合作运行'
        }
      ],
      controlTypeoptions: [
        {
          value: 0,
          label: '控制'
        }, {
          value: 1,
          label: '非控制'
        }
      ],
      timeoptions:[
      {
          value: 5,
          label: '5'
        }, {
          value: 10,
          label: '10'
        },
        {
          value: 15,
          label: '15'
        },
        {
          value: 20,
          label: '20'
        },
        {
          value: 25,
          label: '25'
        },
        {
          value: 30,
          label: '30'
        },
      ],
      ProvinceList: [],
      CityList: [],
      AreaList: [],
      cardData: [],
      imageUrl: '',
      id: 0,
      addFrom: {
        province: '',
        city: '',
        areas: '',
        operationProject: '',
        hospitalAvatarUrl:''
      },
      isUnten: false
    };
  },
  mounted() {
    this.id = this.$route.params.id
    this.getList()
    if (this.id != 0) {
      let that = this
      const loading = that.$loading({
        lock: true,
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getHospitalDetail(this.id).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.addFrom = res.data.hospital
          loading.close()

        }
      })
    }
  },

  methods: {
    untenFun(data) {
      if (this.isUnten) {
        console.log(data);
        if (data == undefined) {
          return true
        } else {
          if (data == '' && data != '0') {
            return true
          } else {
            return false
          }
        }

      } else {
        return false
      }

    },
    getList() {

      getProvince().then(res => {
        if (res.code == 200) {
          res.data.provinceList.map(item => {
            item.label = item.name
            item.value = item.id
          })
          this.ProvinceList = res.data.provinceList
        }
      })
    },
    getCity() {
      getCity(this.addFrom.province).then(res => {
        if (res.code == 200) {
          res.data.cityList.map(item => {
            item.label = item.name
            item.value = item.id
          })
          this.CityList = res.data.cityList
          if (!this.CityList.some(x => { return x.id == this.addFrom.city })) {
            this.addFrom.city = ''
            this.addFrom.areas = ''
          }
        }
      })
    },
    getArea() {
      getArea(this.addFrom.city).then(res => {
        if (res.code == 200) {
          res.data.areaList.map(item => {
            item.label = item.name
            item.value = item.id
          })
          this.AreaList = res.data.areaList
          if (!this.AreaList.some(x => { return x.id == this.addFrom.areas })) {
            this.addFrom.areas = ''
          }
        }
      })
    },
    tabGo() {
      this.$router.go(-1)
    },
    submitd() {
      let that = this
      that.isUnten = true
      console.log(that.addFrom);
      for (let key in that.addFrom) {
        if (key != 'hospitalAvatarUrl' && key !='hospitalLocated') {
          if (that.addFrom.operationProject == 0) {
            if (key != 'operationType') {
              if (that.addFrom[key] === '' || that.addFrom[key] === undefined) {
                console.log(key);
                return false
              }
            }
          } else {
            if (that.addFrom[key] === '' || that.addFrom[key] === undefined) {
              console.log(key);
              return false
            }
          }

        }
      }
      if (that.id == 0) {
        getHospitalAdd(that.addFrom).then(res => {
          if (res.code == 200) {
            this.$Toast(res.message)
            this.tabGo()
          }else{
            this.$Toast(res.message)
          }
        })
        // 新建逻辑
      } else {
        // 编辑逻辑
        getHospitalUpdate(that.addFrom).then(res => {
          if (res.code == 200) {
            this.$Toast(res.message)
            this.tabGo()
          }
        })
      }
    },
    valueHeld(childParam, fatherparam) {
      this.isUnten = false
      this.addFrom[fatherparam] = childParam
    },
    multifunction(e, id) {
      // this.keshi = e
      // this.$router.push({path:'administrative'})
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if(res.code==200){
        this.addFrom.hospitalAvatarUrl = res.data.imgUrl
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }
}
</script>

<style lang="scss" scoped>
.editcss {
  width: 100%;

  .card_contents {
    height: calc(100% - 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .card_contents_tex {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 20px;
    }

    .card_contents_footer {
      padding: 16px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid #EFEFEF;
    }
  }

  .content_h {
    height: 149px;
    border-radius: 5px;
    padding: 0px;
  }

  .title_top {
    height: 79px;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 20px;
  }

  .title_tops {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    height: 79px;
    border-bottom: 1px solid #EFEFEF;

    .title_tops_t {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .title_tops_b {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 28px;
      cursor: pointer;

      img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
      }

      span {
        font-size: 16px;
        font-weight: 400;
        color: #000;
      }
    }
  }

  .screen_case_title {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-right: 35px;
  }

  .title_top_E {
    font-size: 12px;
    font-weight: 400;
    color: #9898989E;
  }

  .title_top_C {
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  ::v-deep .ch_button_seav {
    padding: 7px 27px;

    span {
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        font-size: 16px;
        font-weight: 400;
        margin-left: 10px;
      }
    }
  }

  .ch_button_img_seav {
    width: 24px;
    height: 24px;
  }

  .ch_button_img {
    width: 16px;
    height: 16px;
  }

  .dialog_title_ch_conter_operate {
    padding: 24px 35px;
    // border: 1px solid #EBEBEB;
    border-radius: 2px;
    display: flex;
    // align-items: center;
  }


  /*
  编辑
  */
  .editHeld_conter_left {
    margin-right: 70px;
    white-space: nowrap;
    text-align: center;
  }

  .editHeld_conter_right {
    flex: 1;

    .el-row {
      margin-bottom: 45px;
      display: flex;
      align-items: flex-end;
    }
  }

  ::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  ::v-deep .editHeld_conter_left .border .el-upload {
    border: 1px solid #FE294D;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  // ::v-deep  .avatar-uploader .el-upload:hover {
  //   border-color: #409EFF;
  // }
  .editHeld_conter_left .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
  }

  .editHeld_conter_left .avatar {
    width: 160px;
    height: 160px;
    display: block;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #00000066;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 400;
      color: #FFFFFFAA;
    }
  }
}
</style>
